import React from 'react';
import { Link, Tooltip, IconButton, Zoom } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import Resume from '../../settings/resume.json';

const useStyles = makeStyles((theme) => ({
  socialIcons: {
    position: 'absolute',
    top: theme.spacing(6),
    right: theme.spacing(6),
  },
  iconButton: {
    height: '2.5rem',
    width: '2.5rem',
    display: 'block',
    marginBottom: theme.spacing(2),
    padding: '0 !important',
  },
  icon: {
    fontSize: '2rem',
  },
}));

export const TanmantangIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 133 133"
    >
      <path fill="currentColor" d="m9.7 64.6c0 0-1.3 0.2-2.2 0-0.8-0.2-0.9-1.7 0.5-3.6 1-1.4 3.3-2.6 5.6-3.4 2.4-0.8 5.8-1.9 14.5-1.9 8.7 0 19.6-0.6 33.9-6.6 14.2-6.1 12.3-16.9 3.7-17.3-10.2-0.4-20 7.2-21.9 8.7-6.1 4.6-15.4 13.8-21.7 28.5-5.2 12.2-3.5 16.8-3.3 16.7 0 0 0.3 1.4 3.6 0.2 2.8-1 12-8 13-12.6 0.7-3.5-2.2-3.5-5-0.4-4.1 4.6-0.6 10.8 3 4.7 3.8-6.6 2.4-2.7 2.2-2.1-0.2 0.5-1.6 6.1 2.9-0.1 1.9-2.6 4.4-7.4 3.4-4.3-0.4 1.5-1.2 3.1-1.8 4.5-0.2 0.6-1.7 4.1 2-2.1 3.4-5.7 4.8-3 3.7-0.1-0.2 0.5-0.4 3.7 3.9-1.6 4.2-5.3 3.3-5.3 3.3-5.3 0 0-0.4-0.2-0.9 1.1-0.5 1.3-3.5 8.3-2.5 7.8 0.9-0.5 5.4-8.5 6.4-8.3 1 0.2-2.5 6.3-1.2 6.2 1.3 0 3.4-5.2 4.7-4.8 1.3 0.5-1.2 4.2 0.3 3.7 1.5-0.4 8.2-4.3 8.6-5.9 0.3-1.6-2.4-1.9-4.3 1.9-1.9 3.8-1.1 6.1 2.5 0.9 4-5.6-0.1 3 3.1 1.3 3.4-1.8 6.3-5.5 5.7-6.4-0.4-0.9-4.4 7.1-2.7 6.6 2.2-0.6 5.4-7.4 6.3-6.1 0.8 1.1-1.4 4.2 0 4.3 1.5 0.1 4-3.2 4-3.2 0.5-0.8 10.1-17.9 9.3-17.5-2.4 0.9-15.4 26.4-10.3 26.8 4.1 0.2 13.1-11.9 12.3-13.6-1.2-2.5-8 3.7-6 6.8 1.4 2.1 3.8-5.1 5.1-5.3 1.4-0.3-1.4 4.5 0 4.1 1.6-0.4 6.8-5.8 6.4-6.4-1.3-1.6-3.9 6-3 6 1.2 0 5.5-6.7 6.3-5.8 0.7 0.9-1.8 4.4 0.1 4.4 2.6-0.1 11.6-4.9 8.8-7-2.6-2-6.7 6.5-4.2 6.2 2.2-0.3 4.9-5.5 5.6-5.3 2.1 0.8-17.1 35.6-27.7 33-14.6-3.5 36.6-30.9 37.9-31.6 1.7-1 2.4-3.2-1.8-4.8-4.2-1.6-17.8-2.2-18.4-2.2-9.1 0.5-22.2 1.9-31 3.5-0.5 0.1-1.4 0.3-1.9 0.4-2 0.6-3 1.4-2.7 1.7 0.7 0.5 3.9 0.3 3.9 0.3"/>
    </svg>
  );
};

export const SocialIcons = () => {
  const classes = useStyles();

  const socialItems = Resume.basics.profiles.map((socialItem) => (
    <Link
      href={socialItem.url}
      key={socialItem.username.toLowerCase()}
      target='_blank'
      rel='noopener noreferrer'
      underline='none'
      color='inherit'
    >
      <Tooltip
        title={socialItem.username}
        placement='left'
        TransitionComponent={Zoom}
      >
        <IconButton
          color='inherit'
          aria-label={socialItem.username}
          className={classes.iconButton}
        >
          {socialItem.x_icon.startsWith('<') ? (
            <TanmantangIcon className={classes.icon} />
          ) : (
            <i className={`${classes.icon} ${socialItem.x_icon}`}></i>
          )}
        </IconButton>
      </Tooltip>
    </Link>
  ));

  return <div className={classes.socialIcons}>{socialItems}</div>;
};
